<template>
  <div class="screenWrapper">
    <img src=""/>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ScreenShot from '../utils/ScreenShotUtils';

const srcData = ref()
const videoRef = ref()

onMounted(()=> {
  ScreenShot((data)=> {
    srcData.value = data.base64
    console.log(data)
  })
})
</script>

<style lang="less" scoped>
.screenWrapper {
  -webkit-app-region: no-drag;
  background-color: transparent;
  height: 100vh;
  width: 100vw;
  padding: 20px;
  h1 {
    color: green;
  }
  .showWrapepr {
    display:flex;
    flex-direction: row;
    gap: 10px;
  }
  .imgWrapepr {
    border: 1px solid #ccc;
    width: 500px;
    height: 500px;
  }
}
.box-img{
  width: 200px;
  position: fixed;
  right: 10px;
  top: 10px;
  border: 2px solid red; 

}
</style>